import React, { useEffect, useState,useRef } from 'react'
import {Form, Input, PageHeader,Button,Select, message ,notification} from 'antd';
import { Steps } from 'antd';
import style from './News.module.css'
import axios from 'axios';
import NewsEditor from '../../../components/news-manage/NewsEditor';

const { Option } = Select;
const layout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 22 },
  };
const { Step } = Steps;
export default function NewsUpdate(props) {
    const NewsForm = useRef(null)
    const [categoryList, setCategoryList] = useState([])
    const [formInfo, setformInfo] = useState({})
    const [content, setcontent] = useState("")
    // const User=JSON.parse(localStorage.getItem("token"))
    useEffect(()=>{
        axios.get("/categories").then(res=>{
            setCategoryList(res.data)
        })
    },[])
    useEffect(() => {
        axios.get(`/news/${props.match.params.id}?_expand=category&_expand=role`).then(res => {
           let {title,categoryId,content}=res.data
            NewsForm.current.setFieldsValue({
                title,
                categoryId

            })
            setcontent(content)
        })
    }, [props.match.params.id])
    const [current, setCurrent] = useState(0)
   const handleNext=()=>{
    if(current===0){
        NewsForm.current.validateFields().then(res=>{
           setformInfo(res)
            setCurrent(current+1)
        }).catch(err=>{
            console.log(err)
        })
    }
    else{
        if(content===""||content.trim()==="<p></p>"){
            message.error("新闻内容不能为空")
            
        }
        else{
           

        setCurrent(current+1)
    }
    }
   }
   const handleLast=()=>{
       setCurrent(current-1)
   }
   const handleSave=(auditState)=>{
       axios.patch(`/news/${props.match.params.id}`,{
           ...formInfo,
           content:content,
           auditState:auditState,
        //    publishTime:0
       }).then(res=>{
           props.history.push(auditState===0?"/news-manage/draft":"/audit-manage/list")
       })
       notification.info({
        message: `通知`,
        description:
          `您可以到${auditState===0?'草稿箱':'审核列表'}中查看您的新闻`,
        placement:'bottomRight',
      });
   }
   
    return (
        <div>
             <PageHeader
    className="site-page-header"
    
    title="更新新闻"
    subTitle="副标题"
    onBack={()=>props.history.goBack()}
  />
   <Steps current={current}>
    <Step title="基本信息" description="新闻标题，新闻分类" />
    <Step title="新闻内容"  description="新闻主题内容" />
    <Step title="新闻提交" description="保存草稿或者提交审核" />
  </Steps>
  <div style={{marginTop:"50px"}}>
  <div className={current===0?'':style.active}>
  <Form {...layout}  name="basic" ref={NewsForm}>
      <Form.Item name="title" label="新闻标题" rules={[{ required: true,message:'请输入新闻内容' }]}>
        <Input />
      </Form.Item>
      <Form.Item name="categoryId" label="新闻分类" rules={[{ required: true,message:'请选择新闻类型' }]}>
        <Select
          placeholder="请选择一个新闻分类"
        >
          {
              categoryList.map(item=>{
                 return <Option key={item.id} value={item.id}>{item.title}</Option>
                  
              })
          }
        </Select>
      </Form.Item>
      
     
    </Form>
  </div>
  <div className={current===1?'':style.active}>
    <NewsEditor getContent={(value)=>{
           setcontent(value)
    }} content={content}></NewsEditor>
  </div>
  <div className={current===3?'':style.active}>
      
  </div>
  </div>
  <div style={{marginTop:"50px"}}>
      {
          current===2&&<span>
          <Button type="primary" onClick={()=>handleSave(0)}>保存到草稿箱</Button>
          <Button danger onClick={()=>{
              handleSave(1)
          }}>提交审核</Button>
          </span>
      }
      {
          current<2&&<Button type="primary" onClick={handleNext}>下一步</Button>
      }
      {
          current>0&&<Button onClick={handleLast}>上一步</Button>
      }
  </div>
        </div>
    )
}